<!DOCTYPE html>
<html lang="en">
<head>
    <title>忘记支付密码</title>
    <meta charset="UTF-8">
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <script src="https://og6593g2z.qnssl.com/fundebug.0.3.3.min.js" apikey="e65b1e28cd641345cd31ef6dce8ac62f7aaa3ba3420be5a1c4aa23ee3636992d"></script>
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <link href="{$Think.config.RESOURCEURL}wx_assets/personCenter/css/index.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <link href="{$Think.config.RESOURCEURL}wx_assets/iconfont/iconfont.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/product/cookie.js{$Think.config.RESOURCE_VER}"></script>
</head>
<body id="login">
      <div class="form fast-login" style="display: block;">
      <ul>
          <li>
              <div>
                  <i class="iconfont">&#xe627;</i>
                  <input type="text" placeholder="请输入手机号" class="phone"/>
              </div>
          </li>
          <li>
             <div>
                  <i class="iconfont">&#xe64a;</i>
                  <input type="number" placeholder="请输入验证码" class="code"/>
                  <span class="sms-btn">获取验证码</span>
             </div>
          </li>
      </ul>
      <div class="login-btn next-btn">下一步</div>
    </div>
</body>
<script>
function Page() {
  this.isLoading = false;
};

$.extend(Page.prototype, {
    init: function () {
        this.bindEvents();
    },

    // 绑定事件
    bindEvents: function() {
      $('.sms-btn').click($.proxy(this.handleSmsBtnClick, this));
      $('.next-btn').click($.proxy(this.handleNextBtnClick, this));
    },

    // 点击发送验证码按钮
    handleSmsBtnClick: function() {
      if ($('.sms-btn').hasClass('disabled')) return;
      var phone = $('.fast-login .phone').val();
      if (!phone) {
        $.util.alert("请输入手机号码！");
        return false;
      }
      if(!(/^1[34578]\d{9}$/.test(phone))){
        $.util.alert("手机号码有误，请重填");
        return false;
      }
      var params = {
        phone: phone
      }
      $.ajax({
          type: "get",
          url: '{$Think.config.SERVER_HOST}call.json?customerId={$customerId}',
          dataType: 'json',
          data: {
            module: 'purse',
            method: 'forgetPayPassword',
            params: JSON.stringify(params)
          },
          success: $.proxy(this.handleGteSmsSucc, this)
      });
    },

    // 获取短信成功后执行
    handleGteSmsSucc: function(res) {
      if (+res.code === 0) {
        $('.sms-btn').addClass('disabled');
        var second = 60;
        $('.sms-btn').text('60s后重新获取')
        var timer = setInterval(function(){
          $('.sms-btn').text(--second + 's后重新获取')
          if (second <= 0) {
            clearInterval(timer);
            $('.sms-btn').removeClass('disabled');
            $('.sms-btn').text('获取验证码');
          }
        }, 1000)
      } else {
        $.util.alert(res.msg);
      }
    },

    // 点击下一步按钮
    handleNextBtnClick: function() {
      var phone = $('.phone').val();
      var code = $('.code').val();
      if (!phone) {
        $.util.alert("请输入手机号码！");
        return false;
      }
      if(!(/^1[34578]\d{9}$/.test(phone))){
        $.util.alert("手机号码有误，请重填");
        return false;
      }
      if (!code) {
        $.util.alert("请输入验证码！");
        return false;
      }
      var params = {
        phone: phone,
        code: code
      }
      $.ajax({
          type: "get",
          url: '{$Think.config.SERVER_HOST}call.json?customerId={$customerId}',
          dataType: 'json',
          data: {
            module: 'purse',
            method: 'contrastPhoneCode',
            params: JSON.stringify(params)
          },
          success: $.proxy(this.checkCodeSucc, this),
          error: $.proxy(this.handleAjaxError, this)
      });
    },

    // 验证验证码后执行
    checkCodeSucc: function(res) {
      if (+res.code === 0) {
        location.href = '{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=purse&method=setPayPassword&token=' + res.token
      } else {
        $.util.alert(res.msg)
      }
    },

    // 调用接口验证旧密码
    handleCheckOldPwd: function(oldPwd) {
      if (this.isLoading) return
      this.isLoading = true
      $.util.pageLoading.show();
      var params = {
        oldPassword: oldPwd
      }
      $.ajax({
          type: "post",
          url: '{$Think.config.SERVER_HOST}call.json?customerId={$customerId}',
          dataType: 'json',
          data: {
             module: 'purse',
             method: 'contrastPayPassword',
             params: JSON.stringify(params)
          },
          success: $.proxy(this.handleCheckOldPwdSucc, this),
          error: $.proxy(this.handleAjaxError, this)
      });
    },

    // ajax请求失败时执行
    handleAjaxError: function(err) {
      console.log(err)
    }
});

var page = new Page();
page.init();
</script>
</html>
